<template>
    <div>
        使用watch 监听数据的变化
        <!-- <input type="text" v-model="msg"> -->
        <p @click="count++">count:{{ count }},计算属性doublecount:{{ doubleCount }}</p>
        <hr />
        <!-- <p><span @click="x++">{{ x }}</span>----<span @click="y++">{{ y }}</span></p> --> -->

        <hr />
        <p @click="userinfo.age++">{{ userinfo.name }}--{{ userinfo.age }}</p>
        <p><button @click='replaceObjFn'>替换对象</button></p>

    </div>
</template>

<script setup>
import { ref, watch, computed, reactive, watchEffect } from 'vue';
const msg = ref('72变化');

// watch 可以监听的数据源有哪些?
// 01: ref 引用数据对象
// 02: 计算属性
// 03: 监听某一些数据的组合结果,相当于监听的是一个计算属性的值,该值依赖于其他的数据变化, 官方称之为 一个 getter 函数
// 04: 监听多个数据
// 05: 监听复杂数据类型 实现深度监听
const count = ref(0);
const doubleCount = computed(() => {
    return count.value * 2
})

// watch(msg, (newvalue, oldvalue) => {
//     console.log(newvalue, oldvalue);
// })
// watch(doubleCount, (newvalue, oldvalue) => {
//     console.log(newvalue, oldvalue);
// })

// const x = ref(0);
// const y = ref(0);

// watch(() => { return x.value + y.value }, (newvalue, oldvalue) => {
//     console.log(newvalue, oldvalue);
// })

// watch([x, y], (newvalue, oldvalue) => {
//     console.log(newvalue, oldvalue);
// })


//  默认就是深度监听
let userinfo = reactive({ name: "白嘉轩", age: 30 })
// watch(userinfo, (newvalue) => {
//     console.log(newvalue, oldvalue);
// })

// 箭头函数的写法 (当监听的响应对象被替换的时候触发) 不常用 了解

// watch(() => userinfo.value, (newvalue, oldvalue) => {
//     console.log(newvalue, oldvalue);
// })
// const replaceObjFn = () => {
//     console.log(122);
//     userinfo.value = { name: "鹿子霖", age: 35 }
//     // console.log(userinfo);
// }


// 使用watcheffect 实现初始化监听, 第一次就监听
// 在该watchEffect函数内,写什么响应数据,他会自动去监听该响应数据
watchEffect(() => {
    console.log(userinfo);
    console.log(userinfo.age);
    console.log(count.value)
})



// watch 和watchEffect 两这比较
// 01: watch 必须明确追踪对应数据,当数据改变时,才触发监听,初始不见听
// 02: watchEffect() 追踪该回调函数中的的数据,回调函数中有什么数据就监听什么数据,同时可以监听多个数据


</script>
<style scoped>

</style>